{% extends "base.html.twig" %}
{% block title %}Booking Confirmed
{% endblock %}
{% block head %}
	<link rel="stylesheet" href="styles/bookingConfirm.css">
	{{ parent() }}
{% endblock %}

{% block content %}

	<div class="parallax-1">
		<div class="caption">
			<span class="border">See you soon..</span>
		</div>
	</div>

	<section class="section p-5">
		<div class="container">
			<div class="row-cols-auto text-center g-4">

				<div class="modal-dialog modal-md shadow-sm">
					<div class="modal-content">
						<div class="modal-header">
							<h1 class="text-center card-title text-nowrap" id="exampleModalLabel">Booking Confirmed!</h1>
						</div>
						<div class="modal-body">
							<h5 class="mt-3" >Order Details</h5>
							<hr class="solid">

							<div class="row ">
								<p class="text-start col-7">
									Your confirmation number is:
								</p>
								<p class="text-start col-3">
									<strong>{{ bookingConfirm.booking_confirm }}</strong>
								</p>
							</div>

							<div class="row ">
								<p class="text-start col-7">
									Your total amount paid is:
								</p>
								<p class="text-start col-3">
									<strong>${{ bookingConfirm.price_cad }}</strong>
								</p>
							</div>

							<div class="row ">
								<p class="text-start col-7">
									Your departure date is:
								</p>
								<p class="text-start col-3">
									<strong>{{ bookingConfirm.departure_date }}</strong>
								</p>
							</div>

							<div class="row ">
								<p class="text-start col-7">
									Your return date is:
								</p>
								<p class="text-start col-3">
									<strong>{{ bookingConfirm.return_date }}</strong>
								</p>
							</div>

							<div class="row ">
								<p class="text-start col-7">
									Number of adults:
								</p>
								<p class="text-start col-3">
									<strong>{{ bookingConfirm.number_adults }}</strong>
								</p>
							</div>

							<div class="row ">
								<p class="text-start col-7">
									Number of children:
								</p>
								<p class="text-start col-3">
									<strong>{{ bookingConfirm.number_children }}</strong>
								</p>
							</div>

							<div class="row ">
								<p class="text-start col-7">
									Your trip was booked on:
								</p>
								<p class="text-start col-3 ">
									<strong>{{ bookingConfirm.paymentTS }}</strong>
								</p>
							</div>

							<h5 class="mt-3">Location Details</h5>
							<hr class="solid">

							<div class="row ">
								<p class="text-start col-7">
									Your chosen destination is:
								</p>
								<p class="text-start col-3">
									<strong>{{ bookingConfirm.destination_name }}</strong>
								</p>
							</div>

							<div class="row ">
								<p class="text-start col-7">
									Your hotel name is:
								</p>
								<p class="text-start col-3">
									<strong>{{ bookingConfirm.hotel_name }}</strong>
								</p>
							</div>

							<div class="row ">
								<p class="text-start col-7">
									Your hotel city is:
								</p>
								<p class="text-start col-3">
									<strong>{{ bookingConfirm.hotel_city }}</strong>
								</p>
							</div>

							<div class="row ">
								<p class="text-start col-7">
									Your hotel address is:
								</p>
								<p class="text-start col-3">
									<strong>{{ bookingConfirm.hotel_address }}</strong>
								</p>
							</div>

							<p>A confirmation email will be sent to
								{{user.email}}
								shortly.</p>
						</div>

						<div class="modal-footer">
							<h2>Enjoy Your trip</h2>
						</div>
					</div>
				</div>

			</div>
		</div>
	</section>

	<div class="parallax-1"></div>

{% endblock %}

{% block scripts %}

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

{% endblock %}
